<template>
  <div class="news-management">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon total">
          <i class="el-icon-document"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalCount || 0 }}</div>
          <div class="stat-label">资讯总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon activity">
          <i class="el-icon-star"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.activityCount || 0 }}</div>
          <div class="stat-label">活动数量</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon published">
          <i class="el-icon-check"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.publishedCount || 0 }}</div>
          <div class="stat-label">已发布</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon views">
          <i class="el-icon-view"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalViews || 0 }}</div>
          <div class="stat-label">总浏览量</div>
        </div>
      </div>
    </div>

    <!-- 搜索和操作栏 -->
    <div class="toolbar">
      <div class="search-section">
        <el-input
          v-model="searchForm.title"
          placeholder="搜索标题"
          prefix-icon="el-icon-search"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-select v-model="searchForm.type" placeholder="选择类型" clearable>
          <el-option label="活动" :value="1" />
          <el-option label="资讯" :value="2" />
          <el-option label="公告" :value="3" />
        </el-select>
        <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
          <el-option label="草稿" :value="0" />
          <el-option label="已发布" :value="1" />
          <el-option label="已下架" :value="2" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </div>
      <div class="action-section">
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增资讯</el-button>
      </div>
    </div>

    <!-- 资讯列表 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="newsList"
        stripe
        border
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column label="封面" width="120" align="center">
          <template #default="{ row }">
            <el-image
              :src="getImageUrl(row.coverImage) || '/images/news/default-cover.png'"
              fit="cover"
              class="news-cover"
              :preview-src-list="[getImageUrl(row.coverImage) || '/images/news/default-cover.png']"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="type" label="类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getTypeStyle(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" align="center" />
        <el-table-column prop="viewCount" label="浏览量" width="100" align="center">
          <template #default="{ row }">
            <span class="view-count">{{ row.viewCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐/置顶" width="120" align="center">
          <template #default="{ row }">
            <div class="tags">
              <el-tag v-if="row.isRecommend" type="warning" size="small">推荐</el-tag>
              <el-tag v-if="row.isTop" type="danger" size="small">置顶</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="180" align="center">
          <template #default="{ row }">
            <span>{{ formatDateTime(row.publishTime) || '未发布' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button size="small" type="primary" @click="handleView(row)">查看</el-button>
              <el-button size="small" type="warning" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination-info">
        共 {{ pagination.total }} 条数据
      </div>
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        :pager-count="5"
        :disabled="loading"
        layout="sizes, prev, pager, next"
        class="custom-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 资讯表单对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle" 
      width="800px" 
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="currentNews"
        :rules="formRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="currentNews.title" placeholder="请输入资讯标题" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="副标题">
              <el-input v-model="currentNews.subtitle" placeholder="请输入副标题（可选）" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型" prop="type">
              <el-select v-model="currentNews.type" placeholder="选择类型" @change="handleTypeChange">
                <el-option label="活动" :value="1" />
                <el-option label="资讯" :value="2" />
                <el-option label="公告" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="作者">
              <el-input v-model="currentNews.author" placeholder="请输入作者" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-input v-model="currentNews.source" placeholder="请输入来源" />
            </el-form-item>
          </el-col>
          
          <!-- 活动特有字段 -->
          <template v-if="currentNews.type === 1">
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="currentNews.eventStartTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="currentNews.eventEndTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="活动地点">
                <el-input v-model="currentNews.eventLocation" placeholder="请输入活动地点" />
              </el-form-item>
            </el-col>
          </template>
          
          <el-col :span="24">
            <el-form-item label="封面图">
              <div class="upload-container">
                <el-upload
                  class="cover-uploader"
                  action="#"
                  :http-request="handleImageUpload"
                  :show-file-list="false"
                  :before-upload="beforeImageUpload"
                  accept="image/*"
                >
                  <img v-if="currentNews.coverImage" :src="getImageUrl(currentNews.coverImage)" class="cover-image" />
                  <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="upload-tip">
                  支持 jpg、png、gif 格式，文件大小不超过 10MB
                </div>
                <div v-if="currentNews.coverImage" class="image-actions">
                  <el-button size="small" type="danger" @click="handleRemoveImage">删除图片</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标签">
              <el-input v-model="currentNews.tags" placeholder="请输入标签，逗号分隔" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="摘要">
              <el-input
                v-model="currentNews.summary"
                type="textarea"
                :rows="3"
                placeholder="请输入摘要"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
              <el-input
                v-model="currentNews.content"
                type="textarea"
                :rows="8"
                placeholder="请输入详细内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="推荐">
              <el-switch v-model="currentNews.isRecommend" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="置顶">
              <el-switch v-model="currentNews.isTop" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveNews" :loading="saving">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看活动资讯"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="view-content">
        <!-- 基本信息 -->
        <div class="section">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">标题：</span>
              <span class="value">{{ viewData.title }}</span>
            </div>
            <div class="info-item">
              <span class="label">副标题：</span>
              <span class="value">{{ viewData.subtitle || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">类型：</span>
              <el-tag :type="getTypeStyle(viewData.type)">
                {{ viewData.typeText }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">作者：</span>
              <span class="value">{{ viewData.author || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">来源：</span>
              <span class="value">{{ viewData.source || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">状态：</span>
              <el-tag :type="viewData.status === 1 ? 'success' : 'info'">
                {{ viewData.statusText }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 封面图 -->
        <div class="section" v-if="viewData.coverImage">
          <h3 class="section-title">封面图</h3>
          <div class="cover-preview">
            <el-image
              :src="getImageUrl(viewData.coverImage)"
              fit="cover"
              class="view-cover-image"
            />
          </div>
        </div>

        <!-- 内容信息 -->
        <div class="section">
          <h3 class="section-title">内容信息</h3>
          <div class="info-item full-width" v-if="viewData.summary">
            <span class="label">简介：</span>
            <div class="value content-text">{{ viewData.summary }}</div>
          </div>
          <div class="info-item full-width" v-if="viewData.content">
            <span class="label">详细内容：</span>
            <div class="value content-text" v-html="viewData.content"></div>
          </div>
        </div>

        <!-- 活动信息 -->
        <div class="section" v-if="viewData.type === 1">
          <h3 class="section-title">活动信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">开始时间：</span>
              <span class="value">{{ formatDateTime(viewData.eventStartTime) || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">结束时间：</span>
              <span class="value">{{ formatDateTime(viewData.eventEndTime) || '暂无' }}</span>
            </div>
            <div class="info-item full-width">
              <span class="label">活动地点：</span>
              <span class="value">{{ viewData.eventLocation || '暂无' }}</span>
            </div>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="section">
          <h3 class="section-title">统计信息</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <span class="stat-label">浏览量</span>
              <span class="stat-value">{{ viewData.viewCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">点赞数</span>
              <span class="stat-value">{{ viewData.likeCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">分享数</span>
              <span class="stat-value">{{ viewData.shareCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">排序</span>
              <span class="stat-value">{{ viewData.sortOrder || 0 }}</span>
            </div>
          </div>
        </div>



        <!-- 时间信息 -->
        <div class="section">
          <h3 class="section-title">时间信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">发布时间：</span>
              <span class="value">{{ formatDateTime(viewData.publishTime) || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间：</span>
              <span class="value">{{ formatDateTime(viewData.createTime) || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">更新时间：</span>
              <span class="value">{{ formatDateTime(viewData.updateTime) || '暂无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建者：</span>
              <span class="value">{{ viewData.creatorName || '暂无' }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {
  getNewsPage,
  getNewsStats,
  getNewsDetail,
  createNews,
  updateNews,
  deleteNews,
  updateNewsStatus,
  NEWS_TYPES,
  NEWS_STATUS
} from '@/api/news'
import { uploadImage, deleteImage } from '@/api/upload'
import { getImageUrl, handleImageError } from '@/utils/imageUtils'
import { formatDateTimeForBackend, formatDateTime } from '@/utils/datetime'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('新增资讯')
const viewDialogVisible = ref(false)
const viewData = ref({})
const formRef = ref(null)
const newsList = ref([])

// 统计数据
const stats = reactive({
  totalCount: 0,
  activityCount: 0,
  publishedCount: 0,
  totalViews: 0
})

// 搜索表单
const searchForm = reactive({
  title: '',
  type: null,
  status: null
})

// 分页数据
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 当前编辑的资讯
const currentNews = reactive({
  id: null,
  title: '',
  subtitle: '',
  coverImage: '',
  summary: '',
  content: '',
  type: 2,
  tags: '',
  author: '',
  source: '',
  publishTime: null,
  eventStartTime: null,
  eventEndTime: null,
  eventLocation: '',
  status: 1,
  isRecommend: false,
  isTop: false
})

// 表单验证规则
const formRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

// 获取类型标签
const getTypeLabel = (type) => {
  const labels = { 1: '活动', 2: '资讯', 3: '公告' }
  return labels[type] || '未知'
}

// 获取类型样式
const getTypeStyle = (type) => {
  const styles = { 1: 'success', 2: 'primary', 3: 'warning' }
  return styles[type] || ''
}



// 加载资讯列表
const loadNewsList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      title: searchForm.title || undefined,
      type: searchForm.type || undefined,
      status: searchForm.status || undefined
    }
    
    const response = await getNewsPage(params)
    if (response.code === 200) {
      newsList.value = response.data.records || []
      pagination.total = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('加载资讯列表失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 加载统计信息
const loadStats = async () => {
  try {
    const response = await getNewsStats()
    if (response.code === 200) {
      Object.assign(stats, response.data)
    }
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  loadNewsList()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    title: '',
    type: null,
    status: null
  })
  pagination.page = 1
  loadNewsList()
}

// 新建
const handleCreate = () => {
  dialogTitle.value = '新增资讯'
  Object.assign(currentNews, {
    id: null,
    title: '',
    subtitle: '',
    coverImage: '',
    summary: '',
    content: '',
    type: 2,
    tags: '',
    author: '',
    source: '',
    publishTime: null,
    eventStartTime: null,
    eventEndTime: null,
    eventLocation: '',
    status: 1,
    isRecommend: false,
    isTop: false
  })
  dialogVisible.value = true
}

// 查看
const handleView = async (row) => {
  try {
    const response = await getNewsDetail(row.id)
    if (response.code === 200) {
      viewData.value = response.data
      viewDialogVisible.value = true
    } else {
      ElMessage.error('获取详情失败')
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

// 编辑
const handleEdit = (row) => {
  dialogTitle.value = '编辑资讯'
  Object.assign(currentNews, {
    ...row,
    eventStartTime: row.eventStartTime ? new Date(row.eventStartTime) : null,
    eventEndTime: row.eventEndTime ? new Date(row.eventEndTime) : null
  })
  dialogVisible.value = true
}

// 删除
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定删除"${row.title}"吗？删除后不可恢复。`,
      '确认删除',
      {
        type: 'warning',
        confirmButtonText: '确认删除',
        cancelButtonText: '取消'
      }
    )
    
    const response = await deleteNews(row.id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      loadNewsList()
      loadStats()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 状态变更
const handleStatusChange = async (row) => {
  try {
    const response = await updateNewsStatus(row.id, row.status)
    if (response.code === 200) {
      ElMessage.success(`${row.status === 1 ? '发布' : '下架'}成功`)
      // 如果是发布状态且没有发布时间，设置当前时间
      if (row.status === 1 && !row.publishTime) {
        row.publishTime = formatDateTimeForBackend(new Date())
      }
      // 重新加载列表以获取最新数据
      loadNewsList()
    } else {
      // 失败时恢复原状态
      row.status = row.status === 1 ? 0 : 1
      ElMessage.error(response.message || '状态更新失败')
    }
  } catch (error) {
    console.error('状态更新失败:', error)
    // 失败时恢复原状态
    row.status = row.status === 1 ? 0 : 1
    ElMessage.error('状态更新失败')
  }
}

// 类型变更处理
const handleTypeChange = (type) => {
  if (type !== 1) {
    currentNews.eventStartTime = null
    currentNews.eventEndTime = null
    currentNews.eventLocation = ''
  }
}

// 保存资讯
const saveNews = async () => {
  if (!formRef.value) return
  
  try {
    const valid = await formRef.value.validate()
    if (!valid) return
    
    saving.value = true
    
    // 准备提交数据
    const submitData = { ...currentNews }
    
    // 如果状态为已发布且没有发布时间，则设置当前时间为发布时间
    if (submitData.status === 1 && !submitData.publishTime) {
      submitData.publishTime = formatDateTimeForBackend(new Date())
    }
    
    // 处理活动时间格式转换
    if (submitData.eventStartTime && typeof submitData.eventStartTime === 'object') {
      submitData.eventStartTime = formatDateTimeForBackend(submitData.eventStartTime)
    }
    
    if (submitData.eventEndTime && typeof submitData.eventEndTime === 'object') {
      submitData.eventEndTime = formatDateTimeForBackend(submitData.eventEndTime)
    }
    
    let response
    if (currentNews.id) {
      // 更新
      response = await updateNews(currentNews.id, submitData)
    } else {
      // 创建
      response = await createNews(submitData)
    }
    
    if (response.code === 200) {
      ElMessage.success(currentNews.id ? '更新成功' : '创建成功')
      dialogVisible.value = false
      loadNewsList()
      loadStats()
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// 上传前验证
const beforeImageUpload = (file) => {
  const isJPG = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].includes(file.type)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传 JPG、PNG、GIF 格式的图片!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!')
    return false
  }
  return true
}

// 自定义上传
const handleImageUpload = async (options) => {
  const { file } = options
  
  try {
    const response = await uploadImage(file)
    if (response.code === 200) {
      currentNews.coverImage = response.data.url
      ElMessage.success('图片上传成功')
    } else {
      ElMessage.error(response.message || '上传失败')
    }
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
  }
}




// 删除图片
const handleRemoveImage = async () => {
  if (currentNews.coverImage) {
    try {
      await deleteImage(currentNews.coverImage)
      currentNews.coverImage = ''
      ElMessage.success('图片删除成功')
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.warning('图片删除失败，但已从表单中移除')
      currentNews.coverImage = ''
    }
  }
}

// 分页处理
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  loadNewsList()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  loadNewsList()
}

// 初始化
onMounted(() => {
  loadNewsList()
  loadStats()
})
</script>

<style scoped>
.news-management {
  padding: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
  border: 1px solid #e4e7ed;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  margin-right: 16px;
}

.stat-icon.total { background-color: #409eff; }
.stat-icon.activity { background-color: #f56c6c; }
.stat-icon.published { background-color: #67c23a; }
.stat-icon.views { background-color: #909399; }

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #606266;
}

.toolbar {
  background: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid #e4e7ed;
}

.search-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-section .el-input {
  width: 200px;
}

.search-section .el-select {
  width: 120px;
}

.action-section {
  display: flex;
  gap: 8px;
}

.table-container {
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.news-cover {
  width: 60px;
  height: 40px;
  border-radius: 4px;
}

.view-count {
  color: #606266;
  font-weight: normal;
}

.tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .el-button {
  margin: 0;
  min-width: 56px;
}

/* 分页容器 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

.custom-pagination {
  justify-content: flex-end;
}

/* 上传组件样式 */
.upload-container {
  width: 100%;
  text-align: left;
}

.cover-uploader {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.cover-uploader:hover {
  border-color: #409eff;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 118px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

.cover-image {
  width: 178px;
  height: 118px;
  object-fit: cover;
}

.upload-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

.image-actions {
  margin-top: 8px;
}

/* 对话框底部 */
.dialog-footer {
  text-align: center;
}

/* 查看弹窗样式 */
.view-content {
  max-height: 600px;
  overflow-y: auto;
}

.section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 16px 0;
  padding-left: 8px;
  border-left: 4px solid #409eff;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 8px;
}

.label {
  color: #606266;
  font-weight: 500;
  min-width: 80px;
  flex-shrink: 0;
}

.value {
  color: #303133;
  word-wrap: break-word;
}

.content-text {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  line-height: 1.6;
  white-space: pre-wrap;
  border: 1px solid #e4e7ed;
}

.cover-preview {
  display: flex;
  justify-content: center;
}

.view-cover-image {
  width: 300px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-item {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e4e7ed;
}

.stat-label {
  display: block;
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  color: #409eff;
  font-size: 20px;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .news-dialog {
    width: 90% !important;
  }
  
  .cover-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cover-item {
    flex: none;
    align-self: center;
  }
  
  .options-group {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-section {
    justify-content: center;
  }
  
  .action-section {
    justify-content: center;
  }

  .pagination-wrapper {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .pagination-info {
    text-align: center;
  }
  
  .custom-pagination {
    justify-content: center;
  }
  
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .form-section {
    padding: 16px;
    margin-bottom: 24px;
  }
  
  .news-dialog .el-dialog__body {
    padding: 16px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .view-cover-image {
    width: 250px;
    height: 167px;
  }

  .view-cover-image {
    width: 250px;
    height: 167px;
  }
}
</style>